<template>
  <div class="page-work">
    <div class="work-nav">
      <div class="work-nav-btns">
        <swiper :options="swiperOption" v-if="workTypes.length > 0" ref="mySwiper">
          <swiper-slide v-for="(type, index) in workTypes" :key="index" class="work-nav-btns__btn">
            <span class="work-nav-btns__btn" :class="{ active: currentType === index, [type.class]: true, }"
              @click="changeType(index)">
              {{ type.label }}
              <span class="work-nav-btns__btn-num" style="color: #00ff00;">
                {{ type.num ? `(${portName ? '月' : '年'}总计:${type.num})` : '' }}
              </span>
            </span>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <template v-if="levelLoading">
      <div class="work-level-list-wrapper"
        style="width: 100%;height: calc(100vh - 80px - 100px);display: flex;justify-content: center;align-items: center;">
        <a-spin :spinning="true"></a-spin>
      </div>
    </template>
    <template v-else>
      <!-- 动火作业分级 -->
      <div class="work-level-list-wrapper" v-if="[0].includes(currentType) || ([4].includes(currentType) && !portName)">
        <div class="work-level-item" :class="{ 'rowTwo': ([4].includes(currentType) && !portName) }"
          v-for="(level, index) in workLevels" :key="level.level" ref="workLevelItem">
          <div class="work-level-item__title" :class="{
            'level-s': level.level == 0,
            'level-1': level.level == 1,
            'level-2': level.level == 2 || ([4].includes(currentType) && !portName),
          }" @dblclick="onRefresh(index)">
            {{ level.title }}
            <span v-if="typeof (level.num) == 'number'">{{ `（总计:${level.num}）` }}</span>
          </div>
          <div class="work-level-item__list">
            <PageScroll :probeType="index" :itemInfo="{ ...level, portName: portName, name: level.label }"
              :fromType="workTypes[currentType].name.includes('动火') ? 'workFirle' : 'workLevel'">
            </PageScroll>
          </div>
        </div>
      </div>
      <!-- 其他 -->
      <div class="work-list-wrapper" v-else ref="workListWrapper">
        <PageScroll :probeType="currentType"
          :itemInfo="{ ...workTypes[currentType], portName: portName, name: workTypes[currentType].label }" fromType="workOther">
        </PageScroll>
      </div>
    </template>

  </div>
</template>

<script>
import WorkItem from './components/WorkItem.vue';
import PageScroll from './components/PageScroll';
import { swiper, swiperSlide } from "vue-awesome-swiper";

const PAGE_SIZE = 20;
export default {
  components: {
    WorkItem,
    PageScroll,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      // 新-刘经理提出
      workTypes: [
        {
          label: '动火作业',
          value: '',
          class: 'warining',
        },
        {
          label: '有限空间',
          value: '',
          class: 'warining',
        },
        {
          label: '高处作业',
          value: '',
          class: 'warining',
        },
        {
          label: '吊装作业',
          value: '',
          class: 'warining',
        },
        {
          label: '船只靠离泊',
          value: '',
        },
        {
          label: '检维修作业',
          value: '',
        },
        {
          label: '隐患排查',
          value: '',
        },
        {
          label: '其他作业',
          value: '',
          class: '',
        },
      ],
      portName: '',
      currentType: 0,
      canRefresh: true,
      workLevels: [
        {
          level: 0,
          title: '特级动火',
          workList: [],
        },
        {
          level: 1,
          title: '一级动火',
          workList: [],
        },
        {
          level: 2,
          title: '二级动火',
          workList: [],
        },
      ],
      loading: true,
      page: {
        current: 1,
        totalPage: 0,
      },
      workList: [],
      pageScrollKey: new Date().getTime(),
      levelLoading: true,
      swiperOption: {
        loop: false,
        // observer: true,//修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true,//修改swiper的父元素时，自动初始化swiper
        autoplay: false,
        // {
        //   delay: 0,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        // 显示分页
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true //允许分页点击跳转
        // },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        slidesPerView: 'auto',
        touchEventsTarget: "container",
      },
    };
  },
  created() {
    const { type, port } = this.$route.query;
    if (port) {
      this.portName = port;
    }
    this.workTypes = this.workTypes.map(v => {
      let tem = v;
      if (tem.label == '船只靠离泊') {
        if (!port) {
          tem['label'] = '船舶作业'
        }
      }
      return {
        ...tem,
      }
    })
    if (type) {
      const index = this.workTypes.map(val => val.label).indexOf(type);
      if (index >= 0) {
        this.currentType = index;
      }
    }
    this.getTabList();
    this.getLevel();
  },
  methods: {
    getTabList() {
      this.getAxios(this.$riskControlDataInner, { titleName: this.portName })
        .then((res) => {
          if (res.code == 200) {
            this.workTypes = res.data.map((v) => {
              let i = this.workTypes.find(vv => v.name == vv.label)
              return {
                label: v.name,
                ...v,
                ...i,
              }
            })
          }
        })
        .finally(() => {
        });
    },
    // 获取等级
    getLevel() {
      const params = {
        titleName: this.portName,
      };
      let tabItem = this.workTypes.find((v, i) => i == this.currentType);
      if (!tabItem) {
        return;
      }
      let url = '';
      if (tabItem.label.includes('动火')) {
        url = this.$getLevelList;
      } else if (tabItem.label.includes('船舶作业')) {
        url = this.$getShipDownCabinList;
      } else if (tabItem.label.includes('船只靠离泊')) {
        this.levelLoading = false;
        return;
      }
      this.levelLoading = true;
      this.getAxios(url, params).then((res) => {
        if (res.code == 200) {
          this.workLevels = res.data.map((e) => {
            return {
              ...e,
              level: e.code,
              title: e.name,
              workList: [],
            }
          })
        }
      }).finally(() => {
        this.levelLoading = false;
      }).catch(() => { });
    },
    onRefresh(index) {
      this.$bus.$emit("onRefresh", index);
    },
    onInited(scroll) {
    },
    // 下拉刷新
    onPullingDown(scroll) {
    },
    // 上拉加载
    onPullingUp(scroll) {
    },

    changeType(type) {
      if (type === this.currentType) return;
      this.currentType = type;
      this.workList = [];
      // this.workLevels.forEach(level => {
      //   level.workList = [];
      // });
      this.pageScrollKey = new Date().getTime();
      // 防止双击切换刷新两次
      this.canRefresh = false;
      let n = this.workTypes[type];
      if (n && (n.label.includes('动火') || n.label.includes('船舶作业'))) {
        this.workLevels = [];
        this.getLevel();
      }
      setTimeout(() => {
        this.canRefresh = true;
      }, 1000);
    },
  },
  computed: {
  }
};
</script>

<style lang="less" scoped>
.page-work {
  height: 100%;

  .work-nav {
    // margin-left: 45px;
    // margin-right: 45px;
    // margin-bottom: 12px;
    padding: 12px 24px 6px 24px;
    background-image: url(~@/assets/svg/work-nav-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;

    .work-nav-btns {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // overflow-y: hidden;
      // overflow-x: auto;
      // padding-bottom: 6px;

      .warining {
        background: linear-gradient(170.8deg, rgba(252, 190, 40, 0.4) 1.81%, rgba(252, 190, 40, 1) 98.89%) !important;
      }

      .warining.active {
        background: orange !important;
      }

      .work-nav-btns__btn {
        width: 180px;
        height: 56px;
        min-width: 160px;
        margin: 0px 6px;
        background: linear-gradient(170.8deg, rgba(23, 73, 176, 0) 5.81%, #3357a0 91.89%);
        border: 1px solid #97bbff66;
        color: #fff;
        font-size: 18px;
        // line-height: 54px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: center;

        &.active {
          background: url(~@/assets/svg/btn-active-bg.svg);
          font-weight: 1000;
          border: none;
          // line-height: 56px;
        }
      }
    }

    // 顶部 tab 滚动条样式
    ::-webkit-scrollbar {
      width: 1px;
      height: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #cdcdcd56;
      cursor: pointer;
    }
  }

  .work-list-wrapper {
    padding: 0 14p;
    height: calc(100vh - 116px);
    overflow: hidden;

    .work-list {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      padding: 0px;


      .work-list-item {
        margin-left: 16px;
        margin-right: 16px;
        margin-bottom: 16px;
        // width: 420px;

        // &:nth-child(4) {
        //   // margin-right: 0;
        // }
      }

      @media (max-width:1280px) {
        .work-list-item {
          width: calc(33% - 32px);
        }
      }

      @media (min-width: 1281px) {
        .work-list-item {
          width: calc(25% - 32px);
        }
      }
    }

    // 除动火作业
    .page-scroll-wrapper {
      height: calc(100vh - 206px);
      overflow-y: auto;
    }
  }

  .work-level-list-wrapper {
    display: flex;
    // height: calc(100% - 116px);
    padding: 0 0px;
    height: calc(100vh - 202px);

    .work-level-item {
      flex: 1 0 33.3%;
      max-width: 33.3%;
      padding: 0 10px;

      .work-level-item__title {
        user-select: none;
        padding-left: 18px;
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        background: url(~@/assets/lebel-title-bg.png) no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        font-weight: 900;
        cursor: pointer;

        &::before {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
          border-radius: 50%;
          content: '';
        }

        &.level-2 {
          color: #00e763;

          &::before {
            background-color: #00e763;
          }
        }

        &.level-1 {
          color: #ebff00;

          &::before {
            background-color: #ebff00;
          }
        }

        &.level-s {
          color: #ff0000;

          &::before {
            background-color: #ff0000;
          }
        }
      }

      .work-level-item__list {
        // height: calc(100% - 60px);
        // overflow: hidden;
        padding-top: 10px;
        height: calc(100vh - 250px);
        overflow-y: auto;

        .ul {
          padding: 0px;
        }
      }

      ::v-deep {
        .work-item {
          margin-bottom: 16px;
        }
      }
    }

    .rowTwo {
      flex: 1 0 50%;
      max-width: 50%;
      padding: 0 10px;
    }
  }

  .empty-box {
    text-align: center;
    margin-top: 10%;
  }
}
</style>
